<template>
  <div class="app-content">
    <dk-table ref="DkTableRef" table-api="/adminapi/user" :hide-buttons="[]" :cache-table="!getDev()">
      <template #avatar_slot="{ row }">
        <el-image :src="row.avatar" alt="" style="width: 40px; height: 40px; border-radius: 100px">
          <template #error>
            <img src="@/assets/default/avatar.png" alt="" style="width: 40px; border-radius: 100px" />
          </template>
        </el-image>
      </template>

      <template #platform_slot="{ row }">
        <ul class="wallet-list flex gap-3 cursor-pointer" @click="handleClick({ row }, 'platform')">
          <li title="公众号创建次数/总次数" class="flex flex-col items-center">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-weixin2"></use>
            </svg>
            <p :class="{ 'text-red-500': row.wallet.use_count.wechat >= row.wallet.wechat }">
              {{ row.wallet.use_count.wechat || 0 }}/{{ row.wallet.wechat }}
            </p>
          </li>
          <li title="小程序创建次数/总次数" class="flex flex-col items-center">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaochengxu"></use>
            </svg>
            <p :class="{ 'text-red-500': row.wallet.use_count.min_app >= row.wallet.min_app }">
              {{ row.wallet.use_count.min_app || 0 }}/{{ row.wallet.min_app }}
            </p>
          </li>
          <li title="企业微信创建次数/总次数" class="flex flex-col items-center">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-qiyeweixin1"></use>
            </svg>
            <p :class="{ 'text-red-500': row.wallet.use_count.work_wechat >= row.wallet.work_wechat }">
              {{ row.wallet.use_count.work_wechat || 0 }}/{{ row.wallet.work_wechat }}
            </p>
          </li>
          <li title="抖音创建次数/总次数" class="flex flex-col items-center">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-douyin1"></use>
            </svg>
            <p :class="{ 'text-red-500': row.wallet.use_count.douyin >= row.wallet.douyin }">
              {{ row.wallet.use_count.douyin || 0 }}/{{ row.wallet.douyin }}
            </p>
          </li>
          <li title="自由平台创建次数/总次数" class="flex flex-col items-center">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yingyong4"></use>
            </svg>
            <p :class="{ 'text-red-500': row.wallet.use_count.free >= row.wallet.free }">
              {{ row.wallet.use_count.free || 0 }}/{{ row.wallet.free }}
            </p>
          </li>
        </ul>
      </template>

      <template #group_slot="{ row }">
        <el-tag v-if="!row.userGroup" type="info">会员</el-tag>
        <el-tag v-else :type="row.userGroup.type">{{ row.userGroup?.group_name }}</el-tag>
      </template>

      <template #addon_group_slot="{ row }">
        <el-tag v-if="!row.addonGroup" type="info">默认</el-tag>
        <el-tag v-else>{{ row.addonGroup?.name }}</el-tag>
      </template>
      <template #operation_slot="data">
        <div class="flex">
          <el-dropdown split-button type="primary" @click="handleClick(data, 'edit')">
            编辑
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleClick(data, 'platform')">用户资产配置</el-dropdown-item>
                <el-dropdown-item @click="handleClick(data, 'delete')">删除用户</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </dk-table>
    <dk-form ref="settingRef" :key="chooseItem.uid" :form-data="formData" :is-dialog="true" :dialog="dialog" />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
// 自动判断开发模式启用缓存
// @ts-ignore
import { getDev } from '@/utils/auth'
// @ts-ignore
import { getUserWalletForm } from '@/api/user.js'

const DkTableRef = ref()
const settingRef = ref()
const formData = ref(null)
const formType = ref('')
const dialog = ref({})
const chooseItem = ref({})

const handleClick = (data, type) => {
  chooseItem.value = data.row

  if (type === 'platform') {
    getUserWalletForm(data.row.uid).then((res) => {
      formData.value = res.data
      settingRef.value.show()
      formType.value = 'platform'
      dialog.value = {
        width: '400px'
      }
    })
  }
  if (type === 'edit') {
    DkTableRef.value.DkTable.onTableAction('edit', data)
  }
  if (type === 'delete') {
    ElMessageBox.prompt('请输入"确认删除"以确认操作', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      inputPattern: /^确认删除$/,
      inputErrorMessage: '请输入"确认删除"',
      type: 'warning'
    })
      .then(({ value }) => {
        if (value === '确认删除') {
          DkTableRef.value.DkTable.onTableAction('delete', data)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除'
        })
      })
  }
}

onMounted(() => {
  // DkTableRef.value.DkTable.table.filter.limit = 5
})
</script>
<style lang="scss" scoped></style>
